<template>
  <Modal v-model:visible="open" @ok="handleSuccess">
    <div style="padding: 30px 10px">
      <div></div>
      <div class="min-h-30px" style="border: 1px solid #000; border-radius: 6px; padding: 5px; margin: 16px 0">{{ newData }}</div>
      <div class="flex">
        <div class="flex flex-wrap w-301px" style="border-top: 1px solid #000; border-left: 1px solid #000">
          <div class="w-60px h-60px cursor-pointer flex items-center justify-center" style="border-right: 1px solid #000; border-bottom: 1px solid #000" v-for="item in opList" :key="item.value" @click="handleCLick(item.value)">
            {{ item.label }}
          </div>
        </div>
        <div class="ml-2 w-160px h-300px overflow-auto">
          <div class="mb-1 cursor-pointer" v-for="(item, index) in fieldList" :key="index" @click="handleCLick(item.name)">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, PropType, computed, watch } from 'vue';
import { Modal, message } from 'ant-design-vue';
import { getFormGetFieldsByNumeric } from '/@/api/formDesign/formDesign';
import { useRouter } from 'vue-router';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['success', 'update:visible']);
const { currentRoute } = useRouter();

const open = computed({
  get() {
    console.log('props.visible', props.visible);
    getFieldListData();
    return props.visible;
  },
  set(e) {
    console.log('eee', e);
    emit('update:visible', e);
  },
});
const newData = ref('');
watch(
  () => props.data,
  (newVal) => {
    newData.value = newVal;
  },
  {
    immediate: true,
  },
);
const handleClose = () => {
  open.value = false;
};

const handleSuccess = () => {
  emit('success', newData.value);
  handleClose();
};

let fhType = '';
//点击
const handleCLick = (val) => {
  const code = val; // 当前输入的字符
  console.log('code', code);
  let orgFormulaVal = newData.value;
  console.log('orgFormulaVal', orgFormulaVal);

  let fh = fhType ? fhType : ''; //$('#fhType').val(); // 上一次输入的字符
  console.log('isNaN(code)', isNaN(code));
  if (isNaN(code)) {
    //如果不是数字的时候
    if (code == 'sum') {
      if (fh != undefined && fh != '') {
        if (fh != '+' && fh != '-' && fh != '*' && fh != '/') {
          return;
        }
      }
    }
    if (orgFormulaVal) {
      if (fh != undefined && fh != '') {
        //至少点击输入一次
        if (code == fh) {
          //如果两次输的一样的时候，返回
          return;
        }
        if (!isNaN(fh)) {
          if (!isNaN(code)) {
            //   $('#orgFormula').val(orgFormulaVal + code);
            newData.value += code;
          } else {
            if (
              code != '+' &&
              code != '-' &&
              code != '*' &&
              code != '/' &&
              code != 'C' &&
              code != '.' &&
              code != ')'
            ) {
              return;
            }
          }
        } else {
          if (
            fh != '+' &&
            fh != '-' &&
            fh != '*' &&
            fh != '/' &&
            fh != 'C' &&
            fh != '(' &&
            fh != ')' &&
            fh != ',' &&
            fh != '.'
          ) {
            if (
              code != '+' &&
              code != '-' &&
              code != '*' &&
              code != '/' &&
              code != 'C' &&
              code != '(' &&
              code != ')' &&
              code != ','
            ) {
              return;
            }
          }

          if (fh == '+' || fh == '-' || fh == '*' || fh == '/') {
            //如果两次都是输入符号
            if (code == '+' || code == '-' || code == '*' || code == '/') {
              return;
            }
          }
        }
      } else {
        if (code == 'C') {
          fhType = '';
          newData.value = '';
          return;
        }

        if (code != '+' && code != '-' && code != '*' && code != '/') {
          return;
        }
      }
    } else {
      if (fh != undefined && fh != '') {
        //至少点击输入一次
        if (code == fh) {
          //如果两次输的一样的时候，返回
          return;
        }

        if (fh == '+' || fh == '-' || fh == '*' || fh == '/') {
          //如果两次都是输入符号
          if (code == '+' || code == '-' || code == '*' || code == '/') {
            return;
          }
        }

        if (
          fh != '+' &&
          fh != '-' &&
          fh != '*' &&
          fh != '/' &&
          fh != 'C' &&
          fh != '(' &&
          fh != ')' &&
          fh != ',' &&
          fh != '.'
        ) {
          if (
            code != '+' &&
            code != '-' &&
            code != '*' &&
            code != '/' &&
            code != 'C' &&
            code != '(' &&
            code != ')' &&
            code != ','
          ) {
            return;
          }
        }
      } else {
        if (code == '+' || code == '-' || code == '*' || code == '/') {
          return;
        }
      }
    }

    if (code == 'C') {
      fhType = '';
      newData.value = '';
      return;
    }
  }

  if (!isNaN(code)) {
    //是数字的时候
    if (code == 'sum') {
      if (fh != undefined && fh != '') {
        if (fh != '+' && fh != '-' && fh != '*' && fh != '/' && fh != '.') {
          return;
        }
      }
    }

    if (orgFormulaVal != '') {
      if (fh != undefined && fh != '') {
        //至少点击输入一次
        if (!isNaN(fh)) {
          if (!isNaN(code)) {
            newData.value += code;
          } else {
            if (code != '+' && code != '-' && code != '*' && code != '/' && code != 'C') {
              return;
            }
          }
        } else {
          if (
            fh != '+' &&
            fh != '-' &&
            fh != '*' &&
            fh != '/' &&
            fh != 'C' &&
            fh != '(' &&
            fh != ')' &&
            fh != ',' &&
            fh != '.'
          ) {
            if (
              code != '+' &&
              code != '-' &&
              code != '*' &&
              code != '/' &&
              code != 'C' &&
              code != '(' &&
              code != ')' &&
              code != ','
            ) {
              return;
            }
          }
        }
      } else {
        if (code != '+' && code != '-' && code != '*' && code != '/') {
          return;
        }
      }
    }
  }

  if (fh == '(') {
    if (code == '+' || code == '-' || code == '*' || code == '/') {
      return;
    }
  }

  if (fh == ')') {
    if (code != '+' && code != '-' && code != '*' && code != '/') {
      return;
    }
  }
  if (fh == 'sum') {
    if (code != '+' && code != '-' && code != '*' && code != '/' && code != '.') {
      return;
    }
  }

  if (code != 'C') {
    fhType = code;
  } else {
    fhType = '';
    newData.value = '';
  }

  newData.value += code;
  console.log('newDatanewData', newData.value);
};

const opList: any = [
  {
    label: 'C',
    value: 'C',
  },
  {
    label: '(',
    value: '(',
  },
  {
    label: ')',
    value: ')',
  },
  {
    label: '+',
    value: '+',
  },
  {
    label: '-',
    value: '-',
  },
  {
    label: '*',
    value: '*',
  },
  {
    label: ',',
    value: ',',
  },
  {
    label: 'subDate',
    value: 'subDate',
  },
  {
    label: 'addDate',
    value: 'addDate',
  },
  {
    label: '/',
    value: '/',
  },
  {
    label: 9,
    value: 9,
  },
  {
    label: 8,
    value: 8,
  },
  {
    label: 7,
    value: 7,
  },
  {
    label: 6,
    value: 6,
  },
  {
    label: 5,
    value: 5,
  },
  {
    label: 4,
    value: 4,
  },
  {
    label: 3,
    value: 3,
  },
  {
    label: 2,
    value: 2,
  },
  {
    label: 1,
    value: 1,
  },
  {
    label: 0,
    value: 0,
  },
  {
    label: '.',
    value: '.',
  },
];

const fieldList = ref<Recordable[]>([]);
const getFieldListData = async () => {
  let formCode = currentRoute.value?.query.formCode;
  let params = { formCode };
  fieldList.value = await getFormGetFieldsByNumeric(params);
  fieldList.value.forEach((item) => {
    delete item.options;
    item.label = item.title;
    item.value = item.name;
  });
  console.log('fieldList.value', fieldList.value);
};
</script>
